<template>
  <div class="container">
    <div class="container-content">
      <vab-query-form>
        <vab-query-form-top-panel>
          <el-form
            :inline="true"
            label-width="0px"
            :model="tableOptions.queryForm"
          >
            <el-row :gutter="10">
              <el-col :span="4">
                <el-input
                  v-model="tableOptions.queryForm.paramPrefix"
                  placeholder="请输入参数前缀"
                />
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="tableOptions.queryForm.paramName"
                  placeholder="请输入参数名称"
                />
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="tableOptions.queryForm.paramValue"
                  placeholder="请输入参数值"
                />
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="tableOptions.queryForm.formName"
                  placeholder="请输入配置表单名称"
                />
              </el-col>
              <el-col :span="8">
                <el-button
                  icon="refresh-left"
                  type="warning"
                  @click="handleResetQuery"
                >
                  重置
                </el-button>
                <el-button icon="Search" type="primary" @click="queryTableData">
                  查询
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </vab-query-form-top-panel>
        <vab-query-form-left-panel :span="24">
          <el-button
            v-auth="['config/xz']"
            icon="circle-plus"
            type="primary"
            @click="handleAdd"
          >
            添加
          </el-button>
          <el-button
            v-auth="['config/sc']"
            icon="remove"
            type="danger"
            @click="handleDelete"
          >
            批量删除
          </el-button>
        </vab-query-form-left-panel>
      </vab-query-form>

      <el-table
        ref="tableRef"
        v-loading="tableOptions.loading"
        :data="tableOptions.dataList"
        :height="tableOptions.height"
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
        border
        stripe
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          type="selection"
          width="60"
        />
        <el-table-column label="序号" type="index" width="60">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="参数前缀" prop="paramPrefix" width="160" />
        <el-table-column label="参数名称" prop="paramName" width="160" />
        <el-table-column
          label="参数值"
          prop="paramValue"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="配置表单"
          prop="formName"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :formatter="datetimeFormat"
          label="创建时间"
          prop="createTime"
          width="160"
        />
        <el-table-column
          align="center"
          :formatter="datetimeFormat"
          label="修改时间"
          prop="updateTime"
          width="160"
        />
        <el-table-column align="center" fixed="right" label="操作" width="160">
          <template #default="{ row }">
            <el-button
              v-auth="['config/xg']"
              size="small"
              type="warning"
              @click="handleEdit(row)"
            >
              编辑
            </el-button>
            <el-button
              v-auth="['config/sc']"
              size="small"
              type="danger"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="tableOptions.pagination.current"
        :layout="tableOptions.pagination.layout"
        :page-size="tableOptions.pagination.size"
        :total="tableOptions.pagination.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <ConfigEdit
        ref="configEditRef"
        width="50%"
        @confirm="handleConfirmEdit"
      />
    </div>
  </div>
</template>
<script setup name="ConfigTable">
import { useMessage, useMessageBox } from "@/hooks/message";
import { datetimeFormat } from "@/utils/common";
import { queryConfigTable, deleteConfig } from "@/api/admin/system/config/";
import ConfigEdit from "./components/configEdit.vue";
import { useTable } from "@/hooks/table";

const configEditRef = ref(null);
const tableRef = ref(null);

const tableOptions = reactive({
  autoLoad: true,
  queryForm: {
    paramName: "",
    paramPrefix: "",
    paramValue: "",
    formName: "",
    formId: ""
  },
  queryFunction: queryConfigTable,
  descs: ["create_time"]
});

const {
  tableStyle,
  queryTableData,
  handleSelectionChange,
  handleResetQuery,
  handleRowClick,
  handleSizeChange,
  handleCurrentChange,
  handleSortChange,
  handleToggleHeight
} = useTable(tableOptions, tableRef);

onMounted(() => {
  handleToggleHeight(-10);
});

const handleAdd = () => {
  configEditRef.value.show();
};

const handleEdit = row => {
  if (row.id) {
    configEditRef.value.show(row, false);
  } else {
    useMessage().error("未选中任何行");
  }
};

const handleDelete = row => {
  if (row && row.id) {
    useMessageBox()
      .confirm("删除的参数将无法恢复，是否继续")
      .then(async () => {
        deleteConfig(row.id).then(res => {
          if (res.code === 200) {
            useMessage().success("删除成功");
            queryTableData();
          } else {
            useMessage().error(res.msg);
          }
        });
      });
  } else {
    if (tableOptions.dataSelections.length > 0) {
      const ids = tableOptions.dataSelections.map(item => item.id).join();
      useMessageBox()
        .confirm("删除的参数将无法恢复，是否继续")
        .then(async () => {
          deleteConfig(ids).then(res => {
            if (res.code === 200) {
              useMessage().success("删除成功");
              queryTableData();
            } else {
              useMessage().error(res.msg);
            }
          });
        });
    } else {
      useMessage().error("未选中任何行");
    }
  }
};
const handleConfirmEdit = () => {
  queryTableData();
};
</script>
<style lang="scss" scoped></style>
